<template>
  <el-dialog
    title="修改"
    v-model="isShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="handleClose"
  >
    <el-form
      ref="formRef"
      label-width="auto"
      style="max-width: 600px"
      :model="form"
      :rules="rules"
    >
      <el-form-item prop="licensePlate" label="车牌">
        <el-input v-model="form.licensePlate" :maxlength="30" style="small" />
      </el-form-item>
      <el-form-item prop="vehicleType" label="车辆类型">
        <el-input v-model="form.vehicleType" :maxlength="30" />
      </el-form-item>
      <el-form-item prop="updatedDate" label="更新日期">
        <el-input
          v-model="form.updatedDate"
          type="input"
          disabled
          style="width: 100%"
        >
        </el-input>
      </el-form-item>
      <el-form-item prop="remark" label="备注">
        <el-input
          type="textarea"
          show-word-limit
          resize="none"
          v-model="form.remark"
          :maxlength="150"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="submitLoading"
        >确定</el-button
      >
    </template>
  </el-dialog>
</template>

<script>
import { ref, reactive, toRefs, watch, getCurrentInstance } from 'vue'
import { getErrorCar, updateErrorCar } from '@/api/errorCar'
import { dayjs } from 'element-plus'

export default {
  props: {
    visible: Boolean,
    id: {
      required: true,
      type: Number
    }
  },
  emits: ['closed', 'success'],
  setup(props, context) {
    const { proxy } = getCurrentInstance()
    const formRef = ref()
    const state = reactive({
      isShow: false,
      initLoading: true,
      submitLoading: false,
      form: {
        updatedDate: dayjs(new Date()).format('YYYY-MM-DD')
      },
      
      rules: reactive({
        vehicleType: [
          {
            required: true,
            message: '车辆类型',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 30,
            message: '2至30个字符',
            trigger: 'blur'
          }
        ],
        licensePlate: [
          {
            required: true,
            message: '请输入车牌',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 30,
            message: '2至30个字符',
            trigger: 'blur'
          }
        ]
      })
    })

    const handleClose = done => {
      if (typeof done === 'function') {
        done()
      }
      formRef.value.resetFields()
      context.emit('closed')
    }
    const handleSubmit = () => {
      formRef.value.validate(valid => {
        if (valid) {
          state.submitLoading = true
          state.form.id = props.id
          updateErrorCar(state.form)
            .then(() => {
              context.emit('success')
              handleClose()
            })
            .catch(e =>
              proxy.$message({
                type: 'error',
                message: e.msg
              })
            )
            .finally(() => (state.submitLoading = false))
        }
      })
    }

    watch(
      () => props.visible,
      (newValue, oldValue) => {
        if (newValue) {
          state.initLoading = true
          state.submitLoading = true
          getErrorCar(props.id)
            .then(res => (state.form = res.data))
            .finally(() => {
              state.initLoading = false
              state.submitLoading = false
            })
        }
        state.isShow = newValue
      }
    )

    return {
      formRef,
      ...toRefs(state),
      handleClose,
      handleSubmit
    }
  }
}
</script>
